   <template>
	<div>
	  <div ref="map" class="map"></div>
	  <div class="btns">
		<button @click="drawPoint">画点</button>
		<button @click="drawLine">画线</button>
		<button @click="drawPolygon">画面</button>
		<button @click="drawCircle">画圆</button>
		<button @click="clearDraw">清空</button>
		<button @click="exitDraw">退出</button>
	  </div>
	</div>
  </template>
   
  <script>
	import "ol/ol.css";
	import Map from "ol/Map";
	import View from "ol/View";
	import TileLayer from "ol/layer/Tile";
	import { fromLonLat } from "ol/proj";
	import XYZ from "ol/source/XYZ";
	import Draw from "ol/interaction/Draw";
	import VectorSource from "ol/source/Vector";
	import VectorLayer from "ol/layer/Vector";
	import {A,DisplaysCoordinates} from "./A.js"
   
	export default {
	  name: "OlMap",
	  data() {
		return {
		  map: null,
		  draw: null,
		  source: new VectorSource()
		};
	  },
	  mounted() {
		// 创建地图
		this.createMap();
	  },
	  methods: {
		createMap() {
		  // 创建ArcGIS World Street Map图层
		  const arcGISLayer = new TileLayer({
			source: new XYZ({
			  url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4d517118becca6e092a8b7a48d98da7d"
			})
		  });
   
		  // 创建矢量图层
		  const vector = new VectorLayer({
			source: this.source
		  });
   
		  // 创建地图容器
		  this.map = new Map({
			target: this.$refs.map,
			layers: [arcGISLayer, vector],
			view: new View({
			  center: fromLonLat([120, 30]),
			  zoom: 8
			})
		  });
		},
		addInteraction(type) {
		  // 添加交互绘制控件
		  this.draw = new Draw({
			source: this.source,
			type: type
		  });
		  this.map.addInteraction(this.draw);
		},
		drawPoint() {
		  //退出其他绘制
		  this.exitDraw();
		  // 绘制点
		  this.addInteraction("Point");
		},
		drawLine() {
		  //退出其他绘制
		  this.exitDraw();
		  // 绘制线
		  this.addInteraction("LineString");
		},
		drawPolygon() {
		  //退出其他绘制
		  this.exitDraw();
		  // 绘制面
		  this.addInteraction("Polygon");
		},
		drawCircle() {
		  //退出其他绘制
		  this.exitDraw();
		  // 绘制圆
		  this.addInteraction("Circle");
		},
		clearDraw() {
		  // 清空绘制
		  this.source.clear();
		},
		exitDraw() {
		  // 退出绘制模式
		  if (this.draw) {
			this.map.removeInteraction(this.draw);
			this.draw = null;
		  }
		}
	  }
	};
  </script>
   
  <style scoped>
	.map {
	  width: 100vw;
	  height: 100vh;
	  margin: 0;
	  padding: 0;
	}
	.btns {
	  position: fixed;
	  top: 100px;
	  left: 200px;
	}
  </style>